<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hui</title>
    <link href="../../css/Hui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    </style>
</head>
<body>

    <div class="H-padding-vertical-bottom-10"></div>
    <header class="H-header H-theme-background-color9 H-padding-vertical-top-25" id="header">
        <span onclick="goBack()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-theme-font-color-white H-padding-horizontal-left-5 H-z-index-100"><i class="H-iconfont H-icon-target-back H-font-size-18 H-vertical-middle"></i></span>
        <div class="H-header-title H-center-all H-font-size-18 H-text-show-row-1 H-theme-font-color-white H-position-absolute H-width-100-percent">监控点信息</div>
    </header>
	
	
    <!--################### 搜索样式一 ###################-->
    <div class="H-padding-vertical-bottom-10"></div>
    <div class="H-padding-10 H-theme-background-color-white">
        <div class="H-search H-flexbox-horizontal H-box-sizing-border-box">
            <input type="text" id="deviceName" name="deviceName" placeholder="监控点名称"
                   class="H-border-none  H-theme-background-color-f4f4f4 H-flex-item H-font-size-16
                   H-padding-horizontal-both-10 H-padding-vertical-both-5" />
            <button class="H-button H-font-size-15 H-outline-none
            H-padding-vertical-both-5 H-padding-horizontal-both-20 H-theme-background-color1
            H-theme-font-color-white H-theme-border-color1 H-theme-border-color1-click
            H-theme-background-color1-click H-theme-font-color1-click" style="min-width:0;" id="btnSearch">搜索</button>
        </div>
    </div>


    <div class="H-padding-vertical-bottom-10"></div>

    <div id="container">


    </div>
    <div class="H-padding-vertical-bottom-10"></div>





    <script src="../../script/H.js" type="text/javascript"></script>
    <script src="../../script/jquery-3.7.1.min.js" type="text/javascript"></script>
    <script src="../../api.js" type="text/javascript"></script>
    <script type="text/javascript">
 

        $(function(){
            searchDevice($("#deviceName").val());
			$('#btnSearch').on('click', function() {
			    searchDevice($("#deviceName").val());
			});
        });

        var pageIndex = 1;

        function searchDevice(deviceName) {
            $.ajax({
                type : "post",
                url : baseServer + 'device/pageQuery?pageIndex=' + 1 +"&pageSize=10&userId=1&deviceName=" + deviceName,
                contentType:'application/json;charset=utf-8',
                dataType : "json",
                data : JSON.stringify({
                    pageIndex: pageIndex,
                    pageSize: 10,
                    userId: localStorage.getItem("userId"),
                    deviceName: $("#deviceName").val()
                }),
                async : true,
                success : function(json){
                    if(json && json.code === 0){
                        var list = json.data.list;
                        joinHtml(list)
                    }
                },

            });
        }

        function joinHtml(data){
            $("#container").empty()
            for (let i = 0; i < data.length; i++) {
                var item = data[i];
                var sb=' <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after"'
                    +'  onclick="goDetail('+item.deviceId+')">';
                sb+='        <div class="H-padding-vertical-both-10"><img src="../../image/logo.png" alt="" title=""'
                    +' class="H-display-block H-margin-horizontal-left-10" style="width: 50px; height: 50px;" /></div>';
                sb+='        <div class="H-flex-item H-padding-10">';
                sb+='            <strong class="H-font-weight-normal font-weight-500 H-font-size-16 H-display-block">'+item.companyName+'</strong>';
                sb+='            <div class="H-font-size-14 H-theme-font-color-999 H-text-show-row-2 H-margin-vertical-top-2">'+item.name+'</div>';
                sb+='        </div>';
                sb+='        <div class="H-padding-vertical-both-10">';
                sb+='            <img src="../../image/logo.png" alt="" title="" class="H-display-block H-margin-horizontal-right-10" style="width: 50px; height: 50px;" />';
                sb+='        </div>';
                sb+='    </div>';
                $("#container").append(sb)
            }


        }


        function goDetail(deviceId){
            H.openWin("table_head", "../data/alarm_data.html?deviceId="+deviceId);
        }



    </script>
</body>
</html>